<template>
  <div class="consulting-start">
    <div class="main">
      <MenuLocation :title="'线下预约 / 挂号日期 / 选择时间 / 预约支付'"></MenuLocation>
      <div class="information">
        <!-- <ListInformation :basic="basic"></ListInformation> -->
        <Title :titles="'基本信息'" :top="0"></Title>
        <div>
          <div class="line">
            <div><span class="spot"></span> <span>就诊人</span></div>
            <div>{{ basic.person }}</div>
          </div>
          <div class="line">
            <div><span class="spot"></span><span>接诊医生</span></div>
            <div>{{ basic.realName }}</div>
          </div>
          <div class="line">
            <div><span class="spot"></span><span>院区场地</span></div>
            <div>{{ basic.siteName }}</div>
          </div>
          <div class="line">
            <div><span class="spot"></span><span>性别</span></div>
            <div>{{ basic.sex == 0 ? "女" : "男" }}</div>
          </div>
          <div class="line">
            <div><span class="spot"></span><span>年龄</span></div>
            <div>{{ basic.age }}</div>
          </div>
          <div class="line">
            <div><span class="spot"></span><span>就诊时段</span></div>
            <div>{{ basic.timeSlot }}</div>
          </div>
        </div>
        <!-- <div class="basic-row">
          <Title :titles="'基本信息'" :top="0"></Title>
          <div
            class="basic-infor"
            v-for="(item, index) in basic"
            :key="index"
            :style="
              index
                ? 'margin-top:calc(25 / 1920 * 100vw)'
                : 'margin-top:calc(40 / 1920 * 100vw)'
            "
          >
            <div class="left">
              <span class="mark"></span>
              <span class="title">{{ item.title }}</span>
            </div>
            <div class="right">{{ item.value }}</div>
          </div>
        </div> -->
        <PayModal action="registered"></PayModal>
      </div>
    </div>
    <Footer :top="20"></Footer>
  </div>
</template>
<script>
import Title from "@/pages/online_consulting/title.vue";
import Footer from "@/components/footer/my_footer.vue";
import MenuLocation from "@/components/myComponents/menuLocation.vue";
import ListInformation from "@/components/myComponents/listInformation.vue";
import PayModal from "@/components/myComponents/payModal.vue";
import { goPay } from "@/api/registerPay.js";
export default {
  data() {
    return {
      basic: {},
      person: "",
    };
  },
  components: { Title, Footer, MenuLocation, ListInformation, PayModal },
  beforeCreate() {},
  mounted() {
    this.getinfo();
  },
  methods: {
    getinfo() {
      let birthday = localStorage.getItem("birthday");
      this.basic.age = this.myAge(birthday);
      this.basic.realName = localStorage.getItem("realName");
      this.basic.sex = localStorage.getItem("sex");
      this.basic.siteName = localStorage.getItem("siteName");
      let date = JSON.parse(localStorage.getItem("dateInfo"));
      let time = localStorage.getItem("timeSlot");
      let timeSlot = `${date.year}-${date.month}-${date.date} ${time}`;
      this.basic.timeSlot = timeSlot;
      this.$set(this.basic, "person", localStorage.getItem("personName"));
    },
    myAge(birthday) {
      //根据日期算年龄
      if (birthday && birthday != "null" && birthday != "undefined") {
        birthday = birthday.split("-");
        let date = new Date();
        let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()];
        let age = today.map((val, index) => {
          return val - birthday[index];
        });
        if (age[2] < 0) {
          let lastMonth = new Date(today[0], today[1], 0);
          age[1]--;
          age[2] += lastMonth.getDate();
        }
        if (age[1] < 0) {
          age[0]--;
          age[1] += 12;
        }
        return age[0] + "岁";
      } else {
        return "--";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.line {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #f1f1f1;
  padding: 5px 0;
  div {
    display: flex;
    justify-content: center;
    align-items: center;
    .spot {
      display: block;
      width: 5px;
      height: 5px;
      background-color: #726d6d;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
}

.consulting-start {
  min-height: calc(100vh - (80 / 1920 * 100vw));
  .main {
    padding: 0px calc(360 / 1920 * 100vw);
    .information {
      background: #fff;
      padding: calc(30 / 1920 * 100vw) calc(20 / 1920 * 100vw) calc(70 / 1920 * 100vw);
      border-radius: calc(5 / 1920 * 100vw);
      display: flex;
      flex-direction: column;
    }
  }
}
.basic-row {
  .basic-infor {
    display: flex;
    justify-content: space-between;
    padding: 0px calc(10 / 1920 * 100vw) calc(14 / 1920 * 100vw);
    border-bottom: 1px solid #f1f1f1;
    .left {
      display: flex;
      align-items: center;
      .mark {
        display: block;
        width: calc(6 / 1920 * 100vw);
        height: calc(6 / 1920 * 100vw);
        border-radius: calc(3 / 1920 * 100vw);
        background: #726d6d;
      }
      .title {
        margin-left: calc(8 / 1920 * 100vw);
        font-size: calc(14 / 1920 * 100vw);
        color: #818080;
      }
    }
    .right {
      font-size: calc(14 / 1920 * 100vw);
      color: #818080;
    }
  }
}
</style>
